<template>
    <view class="homePage">
        <view class="TitleFixed" :style='getTitleTop' v-if="titleTop">
            首页
        </view>
        
            <view class="header">
                <swiper class="swiper-box" @change="changeSwiper" autoplay=true duration="500" interval="3000">
                    <swiper-item v-for="(item ,index) in listSwiper" :key="index">
                        <view class="swiper-item" @click="ToBannerLink(item)">
                            <img :src="item.attachDetail.fileUrl" class="detailImg" />
                        </view>
                    </swiper-item>
                </swiper>
                <swiper-dot class="dot" :current="current" :list="listSwiper"></swiper-dot>
            </view>
            <view class="container">
            <!-- 热门目的地 -->
            <view class="detailNav">
                <img src="https://cdn.yueyangshuyuan.com/remen.png" alt="" class="nav-bg">
                <view class="floor-title">
                    <h2>{{projectList.title}}<img src="https://cdn.yueyangshuyuan.com/hot.png" alt=""></h2>
                    <div>{{projectList.subtitle}}</div>
                </view>
                <div class="hot-wapper">
                    <scroll-view class="detailNav-scroll"
                    scroll-x="true" scroll-left="100%" >
                        <view
                            v-for="(proj, i) in projectList.projects"
                            class="scroll-view-item"
                            @click="goProjectShop(proj.id)"
                            :key="proj.id"
                        >
                            <img :src="proj.homePic.fileUrl" class="projecImg"/>
                            <div class="project-detail">
                                <h3>{{proj.name}}</h3>
                                <div>
                                    <img src="https://cdn.yueyangshuyuan.com/di.png" alt=""/>
                                    {{proj.geoLocation.address}}
                                </div>
                            </div>
                        </view>
                    </scroll-view>
                </div>
            </view>
            <view class="widthBorder"></view>
            <!-- 精选推荐-->
            <div class="recommend-selection">
                <view class="floor-title">
                    <h2>{{detailJosn.title}}<img src="https://cdn.yueyangshuyuan.com/tui.png" alt=""></h2>
                    <div>{{detailJosn.subtitle}}</div>
                </view>
                <div class="recomd-wapper" :class="{'nav-tabber_fixed':isFixed}" :style="getTopX" >
                    <scroll-view class="selectionTab"
                    scroll-x="true" @scroll="scroll" :scroll-left='tabScrollLeft' @scrolltolower="scrolltolower">
                        <view
                            v-for="(item, index) in deTailList"
                            class="scroll-view-item_H"
                            :class="{Tabactive:tabActiveIndex == index}"
                            @tap="switchBar(item, index)"
                            :key="item.id"
                        >
                        <!-- 嘻嘻嘻{{index+1}} -->
                        {{ item.name }}
                        </view>
                    </scroll-view>
                </div>
                <ul class="tab-list" :style="getBottomX">
                    <li v-for="(item1,ind1) in deTailList" :key="item1.id" class='mainTab'>
                        <!-- {{item1.name}} -->
                        <ul>
                            <li v-for="(item2,ind2) in item1.merches" :key="ind2" @tap="goodsDetail(item2.id)">
                                <img :src="item2.merchPic[0].fileUrl" alt="">
                                <div class="recomd-detail">
                                    <h1>{{item2.title}}</h1>
                                    <p>{{item2.subtitle}}</p>
                                    <div>
                                        <span class="price">
                                            ¥<span class="price-num">{{item2.price}}</span>
                                        </span> 元
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </view>
        <Tabbar :tabSelect=0></Tabbar>
    </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import Tabbar from '../../components/tabber.vue';
import swiperDot from "@/components/swiperDot.vue"

export default {
    components: {
        Tabbar,
        swiperDot
    },
    // props: ['selected'],
    data() {
        return {
			projectId:19,
            oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩
            isShowMask: false,
			listSwiper:[],
            current:0,
            titleBarHeight:0,
            isFixed:false,
            stickyTop:'',
            scrollTop:'',
            tabScrollLeft:'100%',
            tabActiveIndex:0,
            clickTab:false,
            projectList:[],
            detailJosn:null,
            isPlat:-1,
            deTailList:[],
            titleTop:false,
        };
    },
    onLoad:function(options)  {
       
    },
    onReady() {
        
    },
    onShow(){
        // this.init();
        // this.getPhoneType();
        // this.getBannerList();
        // this.getLayoutList(1);
        // this.getLayoutList(2);
    },
    mounted(){
        this.init();
        this.initApi();
    },
    //页面滚动执行方式
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
        this.titleTop = this.scrollTop > 150 ? true : false;
        if(this.scrollTop > this.stickyTop-80){
            this.isFixed = true;
            this.deTailList.forEach((item,index)=>{
                if(this.scrollTop > item.top -250){
                    if(!this.clickTab){
                        this.tabActiveIndex = index;
                        this.tabScrollLeft = this.deTailList[index].left - 20;
                    }
                }
            })
        }else{
            this.isFixed = false;
        }
    },
    onPullDownRefresh:function(){
        this.initApi();
    },
    computed:{
        ...mapState(['phoneData']),
        getBottomX(){
            if(this.isPlat == 3){
                return 'margin-bottom:86px';
            }
        },
        getTopX(){
            if(this.isFixed){
                if(this.isPlat == 3){
                    return 'padding-top:84px';
                }else if(this.isPlat == 2){
                    return 'padding-top:62px';
                }else if(this.isPlat == 1){
                    return 'padding-top:62px';
                }
            }else{
                return 'padding-top:0';
            }
        },
        getTitleTop(){
            if(this.isPlat == 3){
                return 'padding-top:54px';
            }else if(this.isPlat == 2){
                return 'padding-top:32px';
            }else if(this.isPlat == 1){
                return 'padding-top:32px';
            }
        }
    } ,
    methods: {
        ...mapMutations(['getPhoneType']),
        init(){
            this.getPhoneType();
            if (this.phoneData.model.indexOf('iPhone') !== -1) {//ios
                if(this.phoneData.screenHeight >= 812){//x
                    this.isPlat = 3;
                }else{
                    this.isPlat = 2;
                }
            } else {//安卓
                this.isPlat = 1;
            }
        },
        initApi(){
            this.getBannerList();
            this.getLayoutList(1);
            this.getLayoutList(2);
        },
        switchBar(item, i){
            this.clickTab = true;
            setTimeout(()=>{
                this.tabActiveIndex = i;
                this.clickTab = false;
            },200);
            uni.pageScrollTo({
                scrollTop:this.deTailList[i].top - 200,
                duration: 300
            });
        },
        calcSize(){//计算滚动tab的高度
            setTimeout(()=>{
                uni.createSelectorQuery().selectAll('.mainTab').boundingClientRect(rects=> {
                    rects.forEach((rect,index)=> {
                        
                        this.deTailList[index].top = rect.top;
                        this.deTailList[index].height = rect.height;
                    })
                }).exec();
                uni.createSelectorQuery().selectAll('.scroll-view-item_H').boundingClientRect(rects=> {
                    rects.forEach((rect,index)=> {
                        this.deTailList[index].left = rect.left;
                        this.deTailList[index].width = rect.width;
                    })
                }).exec();
                uni.createSelectorQuery().select('.selectionTab').boundingClientRect(rects=> {
                    this.stickyTop = rects.top;
                }).exec();
            },300);
        },
        //滚动到底部/右边触发
        scrolltolower() {
        },
        scroll(event) {
            //距离么个边界距离
            // console.log(event.detail)
        },
		
        goProjectShop(id){//项目跳转
			uni.navigateTo({
				url: '/pages/projectShop/projectShop?projectId='+id
			});
        },
        goodsDetail(id){//商品跳转
			uni.navigateTo({
				url: '/pages/detail/detail?merchId='+id
			});
		},
		changeSwiper(e){
			this.current = e.detail.current;
		},
        closeMask() {
            this.isShowMask = false;
        },
        getBannerList(){
            this.$api.getBannerList({}).then(json=>{
                this.listSwiper = json;
            });
        },
        getLayoutList(param){
            if(param == 2){
                uni.showLoading({  
                    title: '加载中'  
                });
            }
            this.$api.getLayoutList({
                layoutType:param
            }).then(json=>{
                if(param == 1){
                    this.projectList = json;
                }else if(param == 2){
                    uni.hideLoading();  
                    this.detailJosn = json;
                    this.deTailList = json.merchKinds;
                }
                this.calcSize();
                uni.stopPullDownRefresh();
            });
        },
        ToBannerLink(item){
            switch(item.jumpType){
                case 1://外链
                    item.jumpVal = 'https://www.baidu.com';
                    uni.navigateTo({
                        url: `/jumpH5/jumpH5?url=${item.jumpVal}`
                    })
                break;
                case 2://商品
                    this.goodsDetail(item.jumpVal);
                break;
                case 3://项目
                    this.goProjectShop(item.jumpVal);
                break;
            }
        },
    }
};
</script>

<style lang="scss">
.container{
    position:relative;
	top:-72rpx;
	left:0;
	z-index:9;
}
.header {
	width:750upx;
	// hieght:548upx;
	.swiper-box {
		width:750upx;
		// hieght:548upx;
		.detailImg{
			display: block;
			width:750upx;
			// hieght:548upx;
		}
		
	}
}
swiper,swiper image {
	height:426upx;
}
.dot {
	position: absolute;
	top:328upx;
	left:0;
	z-index:9;
    .dot-item{
        width: 10upx;
        height: 10upx;
    }
    .active{
        width: 36upx;
    }
}
.TitleFixed{
    position: fixed;
    top: 0;
    left: 0;
    color: #262626;
    background: #fff;
    width:100%;
    z-index:1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
}
.floor-title{
    h2{
        font-size: 40rpx;
        color: #262626;
        font-weight: bold;
        img{
            width: 66rpx;
            height: 45rpx; 
            position: relative;
            top: 4rpx;
        }
    }
    div{
        font-size: 28rpx;
        color: #777777;
        margin-top: 12rpx;
    }
}
.widthBorder{
    background: #F7F7FD;
    width: 100%;
    height:20rpx ;
}
.topFixed{
    position: fixed;
    top: 0;
    z-index: 999;
    display: block;
    width: 100%;
    height: 80rpx;
    background:#FFFFFF;
}
.detailNav {
	width:100%;
	padding:30rpx 26rpx;
    // padding-bottom: 0;
	box-sizing:border-box;
	background:#FFFFFF;
	border-radius:28rpx 28rpx 0 0;
	-webkit-border-radius:28rpx 28rpx 0 0;
	// position:relative;
	// top:-50rpx;
	// left:0;
	// z-index:9;
    .nav-bg{
        position: absolute;
        right: 0rpx;
        top: 45rpx;
        width: 328rpx;
        height: 96rpx;
    }
    .hot-wapper{
        height: 280rpx;
        overflow: hidden;
        width: calc(100% + 26rpx);
        padding-top: 24rpx
    }
    .detailNav-scroll{
        width: 100%;
        background:#fff;
        white-space: nowrap; 
        display: flex;
        .scroll-view-item{
            display: inline-block;
            width: 402rpx;
            height: 300rpx;
            border-radius: 8rpx;
            margin-right: 24rpx;
            position: relative;
            .projecImg{
                width: 100%;
                height: 280rpx;
                border-radius: 8rpx;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
            }
            .project-detail{
                position: absolute;
                z-index: 3;
                bottom: 38rpx;
                left: 24rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                width: 100%;
                h3{
                    font-size: 32rpx;
                    color: #FFFFFF;
                    font-weight: bold;
                    margin-bottom: 12rpx;
                    width:calc(100% - 40rpx);
                    overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                }
                >div{
                    width:calc(100% - 40rpx);
                    overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                }
                img{
                   width: 24rpx;
                   height: 24rpx; 
                   vertical-align: middle;
                    margin-right: 6rpx;
                    
                }
            }
        }
    }
}
.recommend-selection{
    padding:26upx 26rpx;
    .recomd-wapper{
        height: 114rpx;
        width: 100%;
        overflow: hidden;
    }
    .nav-tabber_fixed{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background:#fff;
        box-shadow: 0 10px 16px 0 rgba(164,164,164,0.20);
        padding: 0 26rpx;
        height: 96rpx;
        .scroll-view-item_H{
            &:last-child{
                margin-right: 40rpx;
            }
        }
    }
    .selectionTab {
        height: 96rpx;
        padding-top: 26rpx;
        padding-bottom: 34rpx;
        width: 100%;
        background:#fff;
        white-space: nowrap;
        font-size: 30upx;
        color: #777;
        .scroll-view-item_H{
            padding:10rpx 27rpx 10rpx 27rpx;
            background: #F7F7FD;
            display: inline-block;
            margin-right: 28rpx;
            position: relative;
            color: #262626;
            border-radius: 28rpx;
            font-size: 26rpx;
        }
        .Tabactive{
            color: #FFFFFF;
            background-image: linear-gradient(to right,#E25422 , #FF9C64 );
            // box-shadow: 0rpx 6rpx 12rpx rgba(255, 156, 100, 0.5);
        }
    }
    .tab-list{
        margin-bottom: 140rpx;
        .mainTab{
            li{
                display: flex;
                margin-bottom: 30rpx;
                img{
                    width: 280rpx;
                    height: 204rpx; 
                    border-radius: 8rpx;
                    margin-right: 18rpx;
                }
                .recomd-detail{
                    width: calc(100% - 300rpx);
                    h1{
                        font-size: 30rpx;
                        color: #262626;
                        width: 100%;
                        overflow:hidden;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                    }
                    p{
                        font-size: 22rpx;
                        color: #777777;
                        margin-top: 12rpx;
                        margin-bottom: 44rpx;
                        overflow: hidden;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;  /*要显示的行数*/
                        -webkit-box-orient: vertical;
                        word-break: break-all;
                    }
                    div{
                        font-size: 22rpx;
                        color: #777777;
                        .price{
                            color: #E25422;
                            .price-num{
                                font-size: 36rpx;
                            }
                        }
                    }
                }
            }
            
        }
    }
    
    }

</style>

